let vma = {};

let utilsMixin = {
  data() {
    return {
      MTTinited: {}
    }
  },
  methods: {
    listen(newVal, key) {
      console.log('listen')
      if (!this.MTTinited) {
        this.MTTinited[key] = true
      } else {
        if (this.onChange) {
          this.onChange(key, newVal)
        }
      }
    },
    prettyJSON: function (json) {
      if (json) {
        json = JSON.stringify(json, undefined, 4)
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
        return json.replace(
          /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
          function (match) {
            var cls = 'number'
            if (/^"/.test(match)) {
              if (/:$/.test(match)) {
                cls = 'key'
              } else {
                cls = 'string'
              }
            } else if (/true|false/.test(match)) {
              cls = 'boolean'
            } else if (/null/.test(match)) {
              cls = 'null'
            }
            return '<span class="' + cls + '">' + match + '</span>'
          }
        )
      }
    },
  }
}

export function renderVma(id, mixins = []) {
  Vue.component(id + '-com', {
    template: '#' + id + '-com-tpl',
    mixins: [
      utilsMixin,
      ...mixins
    ],
  })
  if (!vma[id]) {
    vma[id] = new Vue({
      el: "#" + id,
      template: '#' + id + '-tpl',
      data() {
        return {
          showCom: true
        }
      },
      methods: {
        getAppClass() {
          return 'vma-' + id
        },
        hide() {
          this.showCom = false
        },
        update() {
          if (this.showCom) {
            this.showCom = false
          }
          this.$nextTick(() => {
            this.showCom = true
          })
        }
      }
    })
  } else {
    vma[id].update()
  }
}

export function hideVma(id) {
  if (vma[id]) {
    vma[id].hide()
  }
}

window.getVma = (id) => {
  return vma[id]
}